﻿@section scripts {
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
<script src="https://unpkg.com/element-plus/dist/locale/zh-cn.min.js"></script>
    <script>
           // 修改前端代码
        const { createApp, ref, reactive, computed, onMounted } = Vue;
        const { ElMessage } = ElementPlus;

        const app = createApp({
            setup() {
                // 使用reactive而不是ref来管理表单数据
                const formData = reactive({
                    first_kind_id: null,
                    first_kind_name: '',
                    second_kind_id: '',
                    second_kind_name: '',
                    second_salary_id: '',
                    second_sale_id: ''
                });

                // 下拉选项
                const firstKindOptions = ref([
                    { value: null, label: '请选择I级机构名称...' },
                    // { value: '02', label: 'Ⅰ级结构' },
                    { value: '01', label: '集团' },
                    { value: '03', label: '总部' }
                ]);

                // 表单验证规则
                const rules = reactive({
                    first_kind_name: [{ required: true, message: '请选择I级机构名称', trigger: 'change' }],
                    second_kind_name: [{ required: true, message: 'II级机构名称不能为空', trigger: 'blur' }],
                    second_salary_id: [{ required: true, message: '薪酬发放责任人编号不能为空', trigger: 'blur' }],
                    second_sale_id: [{ required: true, message: '销售责任人编号不能为空', trigger: 'blur' }]
                });

                // 引用表单实例
                const formRef = ref(null);

                // 处理I级机构选择变化
                    const handleFirstKindChange = (value) => {
      const selectedItem = firstKindOptions.value.find(item => item.value === value);
      formData.first_kind_id = value;
      formData.first_kind_name = selectedItem ? selectedItem.label : '';

      // 根据一级分类设置对应的二级分类
      if (selectedItem && selectedItem.label === '集团') {
        formData.second_kind_name = '集团子公司A';
      } else if (selectedItem && selectedItem.label === '总部') {
        formData.second_kind_name = '总部部门A';
      } else {
        formData.second_kind_name = ''; // 默认清空二级分类
      }
    };

                // 提交表单
                const handleSubmit = async () => {
                    if (formRef.value) {
                        const isValid = await formRef.value.validate();
                        if (isValid) {
                            try {
                                 console.log('提交数据:', JSON.stringify(formData)); // 检查数据格式
                                // 直接使用formData，不需要.value
                                const response = await axios.post(
                                    "/config/secondinsert",
                                    formData,
                                    {
                                        headers: { 'Content-Type': 'application/json' }
                                    }
                                );

                                if (response.data.success) {
                                    ElMessage.success('添加成功');
                                window.location.href='@Url.Action("config_file_second_kind", "config")';
                                } else {
                                    ElMessage.error('添加失败: ' + response.data.message);
                                }
                            } catch (error) {
                                if (error.response) {
                                    console.error('响应错误:', error.response.data);
                                    ElMessage.error(`错误码 ${error.response.status}: ${error.response.data.message}`);
                                } else {
                                    ElMessage.error('网络请求失败');
                                }
                            }
                        }
                    }
                };

                // 返回按钮处理
                const handleBack = () => {
                    window.history.back();
                };

                return {
                    formData,
                    firstKindOptions,
                    rules,
                    formRef,
                    handleFirstKindChange,
                    handleSubmit,
                    handleBack
                };
            }
        });

        app.use(ElementPlus, {
            locale: ElementPlusLocaleZhCn
        });
        app.mount('#vue-app');
    </script>
}

<div id="vue-app">
    <div class="config-file-first-kind">
        <div class="breadcrumb">
            <font color="black">
                您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--I级机构设置--I级机构添加
            </font>
        </div>

        

        <!-- 将注释移到 <el-form> 标签外部 -->
        <el-form
            :model="formData"
            :rules="rules"
            ref="formRef"
            label-width="180px"
            class="el-form-demo"
        >
            <!-- 标签内部的合法注释位置 -->
            <el-form-item label="I级机构名称" prop="first_kind_name">
                <el-select v-model="formData.first_kind_name"
                    placeholder="请选择I级机构名称"
                    v-on:change="handleFirstKindChange"
                >
                    <el-option
                        v-for="item in firstKindOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="II级机构编号" prop="first_kind_id">
                <el-input v-model="formData.first_kind_id"></el-input>
            </el-form-item>

            <el-form-item label="II级机构名称" prop="second_kind_name">
                <el-input v-model="formData.second_kind_name"></el-input>
            </el-form-item>

            <el-form-item label="薪酬发放责任人编号" prop="second_salary_id">
                <el-input v-model="formData.second_salary_id"></el-input>
                
            </el-form-item>

            <el-form-item label="销售责任人编号" prop="second_sale_id">
                <el-input v-model="formData.second_sale_id"></el-input>

            </el-form-item>

            <el-form-item>
                <el-button type="primary" v-on:click="handleSubmit">提交</el-button>
                <el-button v-on:click="handleBack">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>